<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%" class=""></div>
		<!-- Payout method -->
		<div class="method f f-j-b">
			<div class="methodTit">Payout method</div>
			<div @click="setting" class="rigtNotifications f f-a-c">
				<img src="/src/assets/user/setting.png" class="setting" alt="" />
				Setting bank card
			</div>
		</div>
		<!-- Account holder name -->
		<div class="holder">
			<div style="align-items: flex-start" class="f f-a-c f-j-b">
				<div class="divInp">
					<div class="inpTit">Account holder name</div>
					<input type="text" class="inp" v-model="name" placeholder="Account holder name" name="" id="" />
					<div class="enter">Enter the account holder's name exactly as it appears on bank statements.</div>
				</div>
				<div class="divInp">
					<div class="inpTit">Routing number</div>
					<input type="text" class="inp" v-model="numberOne" placeholder="Routing number" name="" id="" />
					<div class="enter">Enter the routing number. It is located on the bottom left corner of a check or within account details from the bank.</div>
				</div>
			</div>
			<div style="align-items: end; margin-top: 40px" class="f f-j-b">
				<div class="divInp">
					<div class="inpTit">Account number</div>
					<input type="text" class="inp" v-model="numberTow" placeholder="Account number" name="" id="" />
					<div class="enter">Enter the account number. This can usually be found within the account details.</div>
				</div>
				<!-- <div class="divInp">
					<div class="inpTit"></div>
					<input type="text" class="inp" v-model="numberStree" placeholder="Confirm account number" name="" id="" />
					<div class="enter">Enter the account holder's name exactly as it appears on bank statements.</div>
				</div> -->
			</div>
			<!-- <div class="savesSv hand">Save</div> -->
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import { SellerUserDetails, GetsPaymentCardInformation, GetAccountLink } from "@/api/xpert.js";
	import { DisplaySellerInformation, GetChargeCard, getAccountPayCard } from "@/api/knowClub/index.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import { useRoute } from "vue-router";
	import router from "@/router/index.js";
	import { ElMessage } from "element-plus";

	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let route = useRoute();
	// 获取路由传过来的参数act==2表示从knowclub的卖家过来的,act==2表示从Xpert的卖家过来的
	let act = route.query.act;
	// console.log(act, "5555");
	let statusTab = ref(1);
	let name = ref("");
	let numberOne = ref("");
	let numberTow = ref("");
	let numberStree = ref("");
	let obj = ref({});
	onMounted(async () => {
		// 表示xp
		await sellOrDetils();
		await getPaymentCardInformation();

		window.addEventListener("scroll", handleScroll);
	});
	const setting = async () => {
		let n = null;
		if (act == 1) {
			n = await GetAccountLink({
				successUrl: "http://www.xpertbay.com/PayoutMethod?act=" + act,
				cancelUrl: "http://www.xpertbay.com/PayoutMethod?act=" + act
			});
		} else {
			n = await GetChargeCard({
				successUrl: "http://www.xpertbay.com/PayoutMethod?act=" + act,
				cancelUrl: "http://www.xpertbay.com/PayoutMethod?act=" + act
			});
		}
		if (n.code == 200) {
			window.open(n.data);
		}
	};
	// /获取卖家收款卡信息
	const getPaymentCardInformation = async () => {
		let n = null;
		if (act == 1) {
			n = await GetsPaymentCardInformation();
		} else {
			n = await getAccountPayCard();
		}
		name.value = n.data.userName;
		numberOne.value = n.data.routingNumber;
		numberTow.value = n.data.last4;
	};
	// 获取卖家用户详情
	const sellOrDetils = async () => {
		let n = null;
		if (act == 1) {
			n = await SellerUserDetails();
		} else {
			let id = JSON.parse(localStorage.getItem("logininfo") || "{}").userIdKc;
			n = await DisplaySellerInformation({ userId: id });
			console.log(n, "111111111111111111111111111");
		}
		obj.value = n.data;
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
